<template>
  <div id="app" >
    <!-- 导航条 -->
    <el-menu class="el-menu-demo" mode="horizontal" @select="menuClick">
      <el-menu-item index="1">项目</el-menu-item>
      <el-menu-item index="2">数据集</el-menu-item>
      <el-menu-item index="3">课程</el-menu-item>
      <el-menu-item index="4">比赛</el-menu-item>
      <el-menu-item index="5">认证</el-menu-item>
      <el-submenu index="6">
        <template slot="title">更多</template>
        <el-menu-item index="6-1">选项1</el-menu-item>
        <el-menu-item index="6-2">选项2</el-menu-item>
        <el-menu-item index="6-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="/personview" style="float: right"
        ><el-row>
          <!-- 登录按钮 -->
          <el-button
            type="primary"
            v-show="this.user == null"
            @click="toLoginView"
            >登录</el-button
          >
          <!-- 头像 -->
          <div>
            <el-avatar
              @click="ToPersonView"
              v-show="this.user != null"
              :src="userFace"
            ></el-avatar>
            {{ nickname }}
          </div>
        </el-row></el-menu-item
      >
    </el-menu>

    <!-- 走马灯 -->
    <div>
      <div class="w">
        <el-carousel height="460px">
          <el-carousel-item v-for="(item, index) in list_img" :key="index">
            <h3 class="small">
              <img :src="item.url" alt />
            </h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <br />
    <div class="">
      <div class="div_allinline">
        <div class="subdiv_allinline">
          新手引导
          <p style="font-size: 1px">带你四步玩转AI Studio，更享专属算力礼包</p>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="subdiv_allinline">
          AI 学习地图
          <p style="font-size: 1px">系统学习路径，从小白成长为大牛</p>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="subdiv_allinline">
          飞桨产业实践范例库
          <p style="font-size: 1px">
            典型产业应用案例投射，直达产业落地的“自动导航”
          </p>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="subdiv_allinline">
          直播日历
          <p style="font-size: 1px">免费AI直播课，精彩内容早知道</p>
        </div>
      </div>
    </div>

<el-divider></el-divider>
    <!-- 首页内容 -->
    <el-main style="background: #ffffff">
      <router-view />

      <br />
      <!-- <el-divider></el-divider> -->
      <br />
    </el-main>
    <!-- 页脚 -->
    <el-footer>
      <div class="div_allinline">
        <div class="subdiv_allinline" style="width: 300px">关于AI Studio</div>
        <div class="subdiv_allinline">相关资源</div>
        <div class="subdiv_allinline">教育专区</div>
        <div class="subdiv_allinline">联系我们</div>
      </div>
    </el-footer>
  </div>
</template>




<script>
export default {
  name: 'Index',
  data() {
    return {
      list_img: [
        { url: require('../assets/t1.png') },
        { url: require('../assets/t1.png') },
        { url: require('../assets/t1.png') },
        { url: require('../assets/t1.png') },
      ],
      user: JSON.parse(window.sessionStorage.getItem('user')),
      userFace:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      nickname: '',
    }
  },
  methods: {
    toLoginView() {
      this.$router.push({ path: '/login' })
    },
    initUser() {
      if (this.user != null) {
        console.log('我进入了赋值区域')
        this.userFace = this.user.userFace
        this.nickname = this.user.nickname
      }
    },
    ToPersonView() {
      this.$router.push({ path: '/personview' })
    },
    menuClick(index) {
      this.$router.push(index)
    },
  },
  created() {
    this.initUser()
  },
}
</script>


<style>
.w1 {
  box-shadow: 5px 2px 6px #000;
}

.w {
  margin: 0 auto;
  width: 100%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 1;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.small img {
  width: 100%;
  height: 100%;
}

.div_allinline {
  text-align: center;
  margin: 0 auto;
  padding: 0;
  clear: both;
}

.subdiv_allinline {
  margin-left: 30px;
  display: inline-block;
  _display: inline;
  *display: inline;
  width: 200px;
  display: inline-block;
  vertical-align: top;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-header {
  text-align: center;
  background-color: #b3c0d1;
  color: #333;
}
.el-footer {
  text-align: center;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
